<template>
	<view class="page">
		<view class="panel">
			<u--form :model="model" ref="form" errorType="message" labelWidth="0" labelPosition="left">
				<view class="enable">
					<u-icon name="info-circle-fill" color="#fff" size="22"></u-icon>
					<view class="text">可转赠金额：￥{{enableValue}}</view>
				</view>
				<view class="label">
					<view class="value">转赠UID</view>
					<view class="describe">转赠前请认证核对用户UID</view>
				</view>
				<u-form-item prop="uid" :borderBottom="false">
					<u-input v-model="model.uid" type="number" clearable placeholder="请输入转赠用户UID"
						placeholderClass="pricePlaceholder" shape="circle"
						custom-style="background:#F7F7F9;padding:8px 20px;">
					</u-input>
				</u-form-item>
				<view class="label">
					<view class="value">转赠金额</view>
				</view>
				<u-form-item prop="value" :borderBottom="false">
					<u-input v-model="model.value" type="digit" placeholder="请输入转赠金额"
						placeholderClass="pricePlaceholder" shape="circle"
						custom-style="background:#F7F7F9;padding:8px 20px;" @blur="onPriceBlur">
						<template #suffix>
							<view class="allButton" hover-class="hover" @click="setAll">全部</view>
						</template>
					</u-input>
				</u-form-item>
			</u--form>
		</view>
	</view>
	<fixed-bar>
		<u-button :loading="buttonLoading" :color="primaryColor" type="primary" text="确认转赠" @click="submit"
			shape="circle"></u-button>
	</fixed-bar>
</template>

<script setup>
	import { ref, reactive, onMounted, computed, nextTick } from 'vue';
	import request from '@/utils/common/request/index';
	import { useGetThemColor } from '@/hooks/useGetThemColor';
	import { useUserStore } from '@/store/modules/useUserStore';
	import { formatterPrice, sleep } from '@/utils/common/index';

	const { primaryColor } = useGetThemColor();
	const userStore = useUserStore();
	let userInfo = computed(() => {
		return userStore.value;
	});

	let enableValue = ref(0);
	request({
		url: '/api/myservice'
	}).then(res => {
		enableValue.value = Number(res.commission);
	});

	const form = ref(null);
	let model = reactive({
		uid: '',
		value: '',
	});
	const onPriceBlur = (value) => {
		model.value = formatterPrice(value);
	}
	const setAll = () => {
		model.value = formatterPrice(enableValue.value);
	}
	// * 校验规则
	const rules = {
		uid: [{
				required: true,
				message: '请输入转赠用户UID',
				trigger: ['blur', 'change'],
			},
			{
				validator: (rule, value, callback) => {
					return value.trim() !== '';
				},
				message: 'UID格式错误',
			},
		],
		value: [{
				required: true,
				message: '请输入转赠金额',
				trigger: ['blur', 'change'],
			},
			{
				validator: (rule, value, callback) => {
					return value.trim() !== '';
				},
				message: '转赠金额格式错误',
			},
		]
	};

	const setFormRules = () => {
		form.value.setRules(rules);
	}

	onMounted(() => {
		setFormRules();
	});

	const buttonLoading = ref(false);
	const submit = () => {
		form.value.validate().then(() => {
			if (model.uid === userInfo.value.user_id) {
				return uni.showToast({
					title: '转赠对象不能是自己',
					icon: 'none'
				})
			}

			if (Number(model.value) > enableValue.value) {
				return uni.showToast({
					title: '可转赠金额不足',
					icon: 'none'
				})
			}
			buttonLoading.value = true;
			request({
				url: '/api/transfer/cc',
				method: 'POST',
				data: {
					user_id: userInfo.value.user_id,
					zz_user_id: model.uid,
					total: model.value
				}
			}).then(async () => {
				uni.showToast({
					title: '转赠成功',
					icon: 'success',
					mask: true
				});
				await sleep();
				uni.navigateBack({
					fail() {
						uni.reLaunch({
							url: "/pages/home/home"
						})
					}
				});
			}).catch(err => {
				buttonLoading.value = false;
			})
		})
	}
</script>

<style lang="scss">
	.panel {
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;

		.enable {
			margin-bottom: 30px;
			display: flex;
			align-items: center;
			padding: 4px 14px 4px 6px;
			background-color: v-bind(primaryColor);
			border-radius: 240px;
			color: #FFFFFF;
			width: max-content;

			.text {
				margin-left: 4px;
			}
		}

		.label {
			margin-bottom: 2px;
			display: flex;
			align-items: center;

			.value {
				margin-right: 10px;
				color: #000E37;
			}

			.describe {
				font-size: 12px;
				color: #8F95A5;
			}
		}

		.allButton {
			color: v-bind(primaryColor);
		}

		::v-deep .u-form-item__body__right__message {
			margin-bottom: 8px;
		}
	}
</style>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>